<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
	</head>
	<body>
		<ul>
			<li>AAAAA</li>
			<li class="box">CCC</li>
			<li title="hello"><span>BBBBB</span></li>
			<li title="hello"><span class="box">DDDD</span></li>
			<span>EEEEE</span>
		</ul>
		
		<!-- 层次选择器:查找子元素，后代元素，兄弟元素的选择器
		1.ancestor descendant
		  在给定的祖先元素下匹配所有的后代元素
		2.parent>child
		  在给定的父元素下匹配所有的子元素
		3.prev+next
		  匹配所有紧接在 prev 元素后的 next 元素
		4.prev~siblings
		  匹配 prev 元素之后的所有 siblings 元素 -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 1.选中ul下所有的span
			// 2.选中ul下所有的子元素span
			// 3.选中class为box的下一个li
			// 4.选中ul下的class为box的元素后面的所有兄弟元素
			
			// 1.选中ul下所有的span
			// $('ul span').css('background','yellow')
			
			// 2.选中ul下所有的子元素span
			// $('ul>span').css('background','yellow')
			
			// 3.选中class为box的下一个li
			// $('.box+li').css('background','yellow')
			
			// 4.选中ul下的class为box的元素后面的所有兄弟元素
			$('ul .box~*').css('background','yellow')
		</script>
	</body>
</html>
